<template>
  <div class="login">
    <div class="login-container">
      <div class="login-header">
        <div>
          <h1>WMS 仓储管理系统</h1>
          <p>专业的企业级仓储管理解决方案</p>
        </div>
      </div>
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
          >
            <template #prefix>
              <el-icon class="input-icon"><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            show-password
          >
            <template #prefix>
              <el-icon class="input-icon"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="code">
          <div class="captcha-container">
            <el-input
              v-model="loginForm.code"
              placeholder="请输入验证码"
            >
              <template #prefix>
                <el-icon class="input-icon"><Key /></el-icon>
              </template>
            </el-input>
            <img
              :src="codeUrl"
              @click="getCode"
              class="captcha-img"
              :class="{ 'loading': codeLoading }"
              alt="验证码"
            />
          </div>
        </el-form-item>

        <div class="remember-me">
          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
        </div>

        <el-button
          :loading="loading"
          type="primary"
          class="login-button"
          @click.prevent="handleLogin"
        >
          {{ loading ? '登录中...' : '登录' }}
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock, Key, Box } from '@element-plus/icons-vue'
import { getCodeImg } from "@/api/login"
import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt"
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const router = useRouter()
const { proxy } = getCurrentInstance()

const loginForm = reactive({
  username: "",
  password: "",
  rememberMe: false,
  code: "",
  uuid: ""
})

const loginRules = {
  username: [
    { required: true, trigger: "blur", message: "请输入用户名" }
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入密码" }
  ],
  code: [
    { required: true, trigger: "change", message: "请输入验证码" }
  ]
}

const codeUrl = ref("")
const loading = ref(false)
const codeLoading = ref(false)
const passwordType = ref("password")
const loginFormRef = ref()

function handleLogin() {
  loginFormRef.value.validate(valid => {
    if (valid) {
      loading.value = true
      if (loginForm.rememberMe) {
        Cookies.set("username", loginForm.username, { expires: 30 })
        Cookies.set("password", encrypt(loginForm.password), { expires: 30 })
        Cookies.set("rememberMe", loginForm.rememberMe, { expires: 30 })
      } else {
        Cookies.remove("username")
        Cookies.remove("password")
        Cookies.remove("rememberMe")
      }
      userStore.login(loginForm)
        .then(() => {
          router.push({ path: "/" })
        })
        .catch(() => {
          loading.value = false
          getCode()
        })
    }
  })
}

function getCode() {
  codeLoading.value = true
  getCodeImg().then(res => {
    codeUrl.value = "data:image/gif;base64," + res.data.img
    loginForm.uuid = res.data.uuid
  }).finally(() => {
    codeLoading.value = false
  })
}

function getCookie() {
  const username = Cookies.get("username")
  const password = Cookies.get("password")
  const rememberMe = Cookies.get("rememberMe")
  loginForm.username = username === undefined ? loginForm.username : username
  loginForm.password = password === undefined ? loginForm.password : decrypt(password)
  loginForm.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)
  loginForm.code = ""
  loginForm.uuid = ""
}

getCode()
getCookie()
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #1e2b4d 0%, #3a7bff 100%);

  .login-container {
    width: 400px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    .login-header {
      text-align: center;
      margin-bottom: 40px;

      h1 {
        font-size: 24px;
        color: #1e2b4d;
        margin-bottom: 8px;
        font-weight: 600;
      }

      p {
        color: #666;
        font-size: 14px;
        margin: 0;
      }
    }

    .login-form {
      :deep(.el-form-item) {
        margin-bottom: 20px;

        &.is-error {
          margin-bottom: 20px;
        }

        .el-form-item__content {
          line-height: 40px;
        }
      }

      :deep(.el-input) {
        .el-input__wrapper {
          padding: 0;
          box-shadow: none;
          background: #f8faff;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          height: 40px;

          &.is-focus {
            border-color: #3a7bff;
            background: #fff;
            box-shadow: 0 0 0 2px rgba(58, 123, 255, 0.1);
          }
        }

        .el-input__inner {
          height: 40px;
          line-height: 40px;
          padding: 0 15px 0 35px;
          color: #1e2b4d;
          font-size: 14px;

          &::placeholder {
            color: #a8b3cf;
          }
        }

        .input-icon {
          font-size: 16px;
          color: #3a7bff;
          margin: 0 12px;
          cursor: pointer;
        }

        .login-header {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 16px;
          margin-bottom: 20px;

          .title-icon {
            font-size: 40px;
            color: #3a7bff;
          }

          h1 {
            margin-bottom: 8px;
          }
        }
      }

      .captcha-container {
        display: flex;
        align-items: center;
        gap: 12px;

        .el-input {
          flex: 1;
        }

        .captcha-img {
          width: 100px;
          height: 40px;
          border-radius: 4px;
          cursor: pointer;
          object-fit: cover;
          transition: all 0.3s;

          &:hover {
            opacity: 0.8;
          }

          &.loading {
            opacity: 0.6;
          }
        }
      }

      .remember-me {
        margin-bottom: 24px;

        :deep(.el-checkbox__label) {
          color: #666;
        }

        :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
          color: #3a7bff;
        }
      }

      .login-button {
        width: 100%;
        height: 40px;
        font-size: 16px;
        font-weight: 500;
        background: #3a7bff;
        border: none;
        border-radius: 4px;
        color: #fff;
        transition: all 0.3s;
        margin-top: 8px;

        &:hover {
          background: #2a6be8;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(58, 123, 255, 0.3);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .login {
    .login-container {
      width: 90%;
      max-width: 400px;
      padding: 30px 20px;
    }
  }
}
</style>
